<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.js"></script>
</head>
<body>
    <button>发送get请求</button>
    <button>发送post请求</button>
    <button>发送put请求</button>
    <button>取消请求</button>
    <script>
        const btns = document.getElementsByTagName("button");

        //默认配置
        axios.defauts = {};
        axios.defauts.method = 'GET';
        axios.defauts.baseURL = 'http://127.0.0.1:8080';
        
        let cancel = null;
        btns[0].onclick = function(){
            //检测上一次的请求是否已经完成
            if(cancel!=null){
                //取消上一次的请求 
                cancel();
            }
            axios({
                method:"GET",
                url:'http://127.0.0.1:8080/posts/2',
                cancelToken: new axios.cancelToken(function(c){
                    //将c的值赋值给cancel
                    cancel = c;
                })
            }).then(response=>{
                console.log(response);
                cancel = null;
            })
        }
        btns[3].onclick = function(){
            cancel();
        }
        //利用request方法发生get请求
        btns[0].onclick= function(){
            axios.request({
                method:"GET",
                url:'http://127.0.0.1:8080/posts/2'
            }).then(response=>{
                console.log(response);
            })
        }
        btns[1].onclick = function(){
            axios({
                method:"POST",
                url:'http://127.0.0.1:8080/posts',
                //设置请求体
                data:{
                    title:'lll',
                    author:"zzz"
                }
            }).then(response=>{
                console.log(response);
            })
        }
        //post另一种写法
        btns[1].onclick = function(){
            axios.post(
                'http://127.0.0.1:8080/posts',
                {
                    "body":"zmj"
                }).then(response=>{
                    console.log(response);
                })
        }
        //更新数据
        btns[2].onclick = function(){
            axios({
                method:"PUT",
                url:'http://127.0.0.1:8080/posts/3',
                //设置请求体
                data:{
                    title:'lllzzz',
                    author:"zzz"
                }
            }).then(response=>{
                console.log(response);
            })
        }

        //设置请求拦截器
        axios.interceptors.request.use(function(config){
            console.log('请求拦截器 成功');
            return config;
        },function(error){
            console.log('请求拦截器 失败');
            return Promise.reject(error);
        });
        //设置响应拦截器
        axios.interceptors.response.use(function(response){
            console.log('响应拦截器 成功');
            return response;
        },function(error){
            console.log('响应拦截器 失败');
            return Promise.reject(error);
        });
    </script>
</body>
</html>